<template>
	<view class="content" @click="projectAction">
		<view class="project">
			<image class="image" src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_lose_weigh.png"></image>
			<text class="status" :style="{'background':projectData.statustColor}">{{projectData.status}}</text>
			<view class="project_head">
				<text class="project_title">{{projectData.projectName}}</text>
			</view>
			<view class="project_content">
				<text class="line"></text>
				<view class="flex-item">
					<text class="project_content_title">项目进度</text>
					<text class="project_content_value BebasNeueBold">{{projectData.progressRate+'%'}}</text>
				</view>
				<text class="line"></text>
				<view class="flex-item1">
					<text class="project_content_title uni-icon">累计训练次数▸</text>
					<text class="project_content_value BebasNeueBold">{{''+projectData.executeNumber+''}}<text
							class="project_content_value"
							style="color:rgba(255,255,255,0.7);">{{'/'+projectData.executionTotal}}</text>
					</text>
				</view>
				<text class="line"></text>
				<view class="flex-item">
					<text class="project_content_title uni-icon">运动时长(分钟)▸</text>
					<text class="project_content_value BebasNeueBold">{{projectData.schemeTotal}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				projectData: {
					status: '进行中',
					statustColor: 'rgb(255, 90, 38)',
					projectName: '久坐减脂运动干预项目（非采血）',
					progressRate: 74,
					executeNumber: 8,
					executionTotal: 96,
					schemeTotal: 60
				}
			}
		},
		props: {
			dataList: {
				type: Array,
				default: []
			},
		},
		methods: {
			projectAction() {
				console.log('projectAction==>>')
				uni.navigateTo({
					url: '/pages/train/schemedetail'
				})
			},
		},
	}
</script>

<style>
	.image {
		display: flex;
		flex: 1;
		height: 196rpx;
		margin-right: 30rpx;
		position: absolute;
		right: 0rpx;
		width: 223rpx;
	}

	.more_image {
		flex-shrink: 0;
		height: 48rpx;
		width: 48rpx;
	}

	.project_content_value {
		color: #fff;
		font-size: 50rpx;
	}

	.project_content_title {
		color: hsla(0, 0%, 100%, 0.7);
		font-size: 24rpx;
	}

	.project {
		cursor: pointer;
		background-image: linear-gradient(180deg, #ff864e, #ff6924);
		border-radius: 30rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 196rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		padding-bottom: 24rpx;
		position: relative;
	}

	.project_content {
		align-items: center;
		flex-direction: row;
		margin-left: 36rpx;
		margin-right: 24rpx;
		margin-top: 16rpx;
		z-index: 1;
	}

	.flex-item,
	.project_content {
		display: flex;
		flex: 1;
		justify-content: center;
	}

	.flex-item {
		flex-direction: column;
		width: 30%;
	}

	.flex-item,
	.flex-item1 {
		padding-left: 12rpx;
		text-align: left;
	}

	.flex-item1 {
		display: -webkit-flex;
		display: flex;
		flex: 1.3;
		flex-direction: column;
		justify-content: center;
		width: 36%;
	}

	.line {
		background-color: hsla(0, 0%, 100%, 0.4);
		height: 62rpx;
		width: 2rpx;
	}

	.project_head {
		display: flex;
		margin-left: 34rpx;
		margin-right: 100rpx;
		margin-top: 30rpx;
	}

	.project_title {
		color: #fff;
		font-size: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.status {
		background-color: #ff5a26;
		border-bottom-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 12rpx 24rpx;
		position: absolute;
		right: 0rpx;
	}

	.content,
	.status {
		display: -webkit-flex;
		display: flex;
		flex: 1;
	}

	.content {
		flex-direction: column;
		justify-content: center;
	}

	.BebasNeueBold {
		font-family: BebasNeueBold;
	}
</style>